<template>
	<view class="orderWrap">
		<view class="nav">
			<view :class="['nav_item',nav_index == index ? 'nav_item_i':'']" @tap="change(index)" v-for="(item, index) in navList"
			 :key="index">
				{{item.title}}
				<view class="line">
				</view>
			</view>
		</view>

		<!-- 滑动切换 -->
		<view>
			<swiper class="swiper" @change="changeSwiper" :current="nav_index" :style="{height:searchHeight+'px'}" v-if="!shopLoad">
				<swiper-item class="swiper-item" v-for="(item,index) in navList" :key="index">
					<scroll-view class="swiper_scroll" :scroll-y="true" @scrolltolower="getmoreNews">
						<recharge-record :addlist="addlist" v-if="index == 0"></recharge-record>
						<bill-details :sublist="sublist" v-if="index == 1"></bill-details>
						<uni-load-more :loadingType="loadingType" :contentText="contentText" v-if="(index == 0 && addlist.length) || (index == 1 && sublist.length)"></uni-load-more>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view class="load" v-if="shopLoad">
				<image :src="Url+'add_images/shop-logo.gif'"></image>
			</view>
		</view>
		<sc-home></sc-home>
	</view>
</template>

<script>
	import rechargeRecord from '@/components/accountBalance/rechargeRecord.vue'
	import billDetails from '@/components/accountBalance/billDetails.vue'
	import uniLoadMore from '@/components/uni-load-more.vue';
	import list from '@/mixins/list.js'
	import {
		getfinance
	} from '@/common/mine.js';
	export default {
		components: {
			rechargeRecord,
			billDetails,
			uniLoadMore
		},
		data() {
			return {
				Url: this.Imgurl,
				searchHeight: 0,
				shopLoad: true,
				navList: [{
						title: '充值记录',
					},
					{
						title: '账单详情',
					},
				],
				nav_index: 0,
				beginflag: true,
				addlist: [],
				sublist: []
			}
		},
		mixins: [list],
		mounted() {
			let that = this;
			this.$nextTick(function() {
				uni.getSystemInfo({
					success: function(res) {
						const query = uni.createSelectorQuery()
						that.searchHeight = res.windowHeight - 30;
					}
				});
			})
		},
		onLoad(options) {
			this.nav_index = +this.opsInfo.index
			this.shopLoad= true;
		},
		methods: {
			change(key) {
				this.nav_index = key
				this.getData()
			},
			changeSwiper(e) {
				console.log(e);
				this.nav_index = e.detail.current
				this.getData()
			},
			getData() {
				this.shopLoad = true;
				if (this.beginflag) {
					this.nav_index = +this.opsInfo.index
					console.log(this.opsInfo)
					this.beginflag = false
				}
				let params = {
					type: this.nav_index == 0 ? 4 : 0,
					account_type: 2,
					page: 1
				}
				console.log(params)
				getfinance(params).then(res => {
					console.log(res)
					if (res.code == 1) {
						if (res.msg.data.length) {
							if (this.nav_index == 0) {
								this.addlist = res.msg.data
							} else {
								this.sublist = res.msg.data
							}
							this.page = res.msg.current_page
							this.last_page = res.msg.last_page
							uni.hideLoading();
							uni.stopPullDownRefresh();
							this.loadingType = res.msg.last_page > 1 ? 0 : 2;
						}
						this.shopLoad = false;
					} else {
						this.shopLoad = false;
					}
				}).catch()
			},
			getmoreNews() {
				console.log("获取下一页")
				if (this.loadingType !== 0) { //loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中'
				});
				if (this.page == this.last_page) {
					uni.hideLoading();
					uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
				} else {
					this.page++;
					let params = {
						type: this.nav_index == 0 ? 4 : 0,
						account_type: 2,
						page: this.page
					}
					var that = this
					getfinance(params).then(res => {
						if (res.code == 1) {
							var itemProduct = res.msg.data
							if (this.nav_index == 0) {
								that.addlist = that.addlist.concat(itemProduct)
							} else {
								that.sublist = that.sublist.concat(itemProduct)
							}
							this.loadingType = this.page == this.last_page ? 2 : 0
						}
					}).catch()
					uni.hideLoading();
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.load {
		image {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100upx;
			height: 100upx;
		}
	}
	.nav {
		width: 100%;
		height: 90upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.nav_item {
			text-align: center;
			line-height: 90upx;
			font-size: 32upx;
			color: #333333;
			z-index: 10;
			position: relative;

			.line {
				display: none;
			}
		}

		.nav_item_i {
			color: #FF2842;

			.line {
				display: block;
			}
		}

		.line {
			position: absolute;
			bottom: 20upx;
			width: 135upx;
			height: 20upx;
			left: -4upx;
			background-color: #fdd8d5;
			border-radius: 10upx;
			z-index: -1;
		}
	}
	.orderWrap {
		height: 100vh;
		overflow: hidden;
		box-sizing: border-box;
	}
	.swiper {
		display: flex;
		width: 100%;
		.swiper-item {
			flex: 1;
			flex-direction: row;
		}
	}
	.swiper_scroll {
		height: 100%;
	}
	.no_order {
		width: 100%;
		text-align: center;
		overflow: hidden;

		image {
			width: 227upx;
			height: 236upx;
			display: block;
			margin: auto;
			margin-top: 200upx;
			margin-bottom: 50upx;
		}

		.no_order_to {
			font-size: 28upx;
			color: #999999;

			text {
				color: #f73e2f;
				text-decoration: underline;
			}
		}
	}
</style>
<style>
	page {
		background-color: #f8f8f8;
		min-height: 100vh;
	}
</style>
